/*
  学习目标：更新阶段
  钩子函数:
    1. render
    2. componentDidUpdate
  触发更新阶段的两种方式:
    1. setState
    2. props值改变
  注意事项:
    💥不能在更新阶段的任何钩子函数中, 调用setState, 否则死循环
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 100,
  };

  // render: 更新dom
  // 场景: 做计算属性
  render() {
    const doubleCount = this.state.count * 2;
    this.setState({ count: this.state.count + 1 });
    return (
      <div>
        <h1> {doubleCount}</h1>

        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          点我更新count
        </button>

        <Child count={this.state.count}></Child>
      </div>
    );
  }

  // 对标: updated更新后
  // 场景: 做本地缓存
  componentDidUpdate() {}
}

class Child extends React.Component {
  render() {
    console.log('render  ----->  ');
    return <div>{this.props.count}</div>;
  }

  componentDidUpdate() {
    console.log('componentDidUpdate  ----->  ');
  }
}
